<template>
<div class="box-padding">
    <Form label-position="right" :label-width="100">
    <div class="role-title">{{ $route.params.name }}</div>
    <div class="add-edit-detail-box">
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="所属机构">
                    <Input v-model="ledgerObj.parentShortName" placeholder="请输入所属机构" disabled />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="机构编号" :required="$route.params.type == 'detail' ? false : true">
                    <Input 
                    v-model="ledgerObj.code" placeholder="请输入机构编号" 
                    :disabled="$route.params.type == 'detail' || $route.params.type == 'edit' ? true : false" />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="机构全称" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.name" placeholder="请输入机构全称" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="机构简称" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.shortName" placeholder="请输入机构简称" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="管辖范围" :required="$route.params.type == 'detail' ? false : true">
                    <Row :gutter="10">
                        <Col span="8">
                            <Select v-model="modelSelect" multiple
                                style="width:260px" 
                                @on-change="getItemValue" 
                                :disabled="$route.params.type == 'detail' ? true : false">
                                <Option 
                                    v-for="(item,index) in provinceArr" 
                                    :value="item.id" :key="index">{{ item.name }}</Option>
                            </Select>
                        </Col>
                    </Row>
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="办公地址" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.address" placeholder="请输入办公地址" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="联系人" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.linkman" placeholder="请输入联系人" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="联系电话" :required="$route.params.type == 'detail' ? false : true">
                    <Input v-model="ledgerObj.linkmanPhone" placeholder="请输入联系电话" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
            </Col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg-ledger">
            <Col span="16">
                <FormItem label="概况说明">
                    <Input v-model="ledgerObj.description" type="textarea" :rows="4" placeholder="请输入概况说明" :disabled="$route.params.type == 'detail' ? true : false" />
                </FormItem>
            </Col>
        </Row>
    </div>
    <div class="role-bottom" v-show="$route.params.type != 'detail'">
        <Button type="primary" @click="save">保存</Button>
        <Button style="margin-left:20px;" @click="cancel('add-area')">取消</Button>
    </div>
    </Form>
</div>
</template>

<script>
import {
    mapMutations
} from 'vuex'
import closeTag from '../../../mixins/closeTag'
import Utils from '../../../common/util'
export default {
    mixins: [closeTag],
    data() {
        return {
            ledgerObj: {
                code: '',
                scopeList:[]
            },
            params: {
                whereMap: {
                    parentId: '0'
                }
            },
            provinceArr: [],
            citiesArr: [],
            countyArr: [],
            modelSelect:[]
        }
    },
    mounted() {
        if (this.$route.params.type != 'add') {
            this.deptDetail()
        }
        this.regionList()
        if (this.$route.query.parentName) {
            this.$set(this.ledgerObj, 'parentShortName', this.$route.query.parentName)
        }
        if(this.$route.params.type === 'add'){
            this.getCode()
        }
    },
    methods: {
        ...mapMutations(['closeTag']),
        closetab() {
            this.closeTag({
                name: this.$route.name,
                params: this.$route.params,
                query: this.$route.query
            });
        },
        getCode() {
            let data = {
                type: 5,
                parentId: this.$route.params.id
            }
            this.$api.companyOrganization.codeGenerate(data).then(resp => {
                if (resp.code == 200) {
                    this.ledgerObj.code = resp.data;
                }
            })
        },
        getItemValue(vals) {
            this.ledgerObj.scopeList = []
            vals.forEach(val=>{
                this.provinceArr.forEach(item=>{
                    if(item.id === val){
                        let obj = {}
                        obj.provinceId = item.id
                        obj.provinceName = item.name
                        this.ledgerObj.scopeList.push(obj)
                    }
                })
            })
        },
        // 省市区三级联动
        regionList(type) {
            this.$api.companyOrganization.regionList(this.params).then(resp => {
                if (resp.code == 200) {
                    if (type == 'city') {
                        this.citiesArr = resp.data.resultObject
                    } else if (type == 'district') {
                        this.countyArr = resp.data.resultObject
                    } else {
                        this.provinceArr = resp.data.resultObject
                    }
                } else {
                    this.$Message.warning(resp.message)
                }
            })
        },
        changeProvince(id) {
            this.params.whereMap.parentId = id
            this.countyArr = []
            this.ledgerObj.districtId = ''
            this.regionList('city')
        },
        changeCity(id) {
            this.params.whereMap.parentId = id
            this.regionList('district')
        },
        // 详情
        deptDetail() {
            if (this.$route.params.name === '日志详情') {
                this.$api.operationLog
                    .getOperationLogDetail(this.$route.params.id)
                    .then(res => {
                        if (res.code === 200) {
                            let data = JSON.parse(res.data.params)
                            this.ledgerObj = {
                                ...data
                            }
                        data.scopeList.forEach(item =>{
                            this.modelSelect.push(item.provinceId)
                        })
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
            } else {
                this.$api.companyOrganization.enterpriseDetail(this.$route.params.objectId).then(resp => {
                    if (resp.code == 200) {
                        this.ledgerObj = resp.data;
                        resp.data.scopeList.forEach(item =>{
                            this.modelSelect.push(item.provinceId)
                        })
                    } else {
                        this.$Message.warning(resp.data)
                    }
                })
            }
        },
        // 编辑
        save() {
            if (this.ledgerObj.code.length > 30) {
                this.$Message.warning("机构编号不能超过30个字符！");
                return;
            }
            if (!this.$regex.numberAndEnglishRegEx(this.ledgerObj.code)) {
                this.$Message.warning("机构编号只能包含英文字母和数字！");
                return;
            }
            if (!this.ledgerObj.name) {
                this.$Message.warning("机构全称不能为空！");
                return;
            }
            if (this.ledgerObj.name.length > 60) {
                this.$Message.warning("机构全称不能超过60个字符！");
                return;
            }
            if (!this.ledgerObj.shortName) {
                this.$Message.warning("机构简称不能为空！");
                return;
            }
            if (this.ledgerObj.shortName.length > 60) {
                this.$Message.warning("机构简称不能超过60个字符！");
                return;
            }
            if (!this.ledgerObj.scopeList) {
                this.$Message.warning("区域管辖范围不能为空！");
                return;
            }
            if (!this.ledgerObj.address) {
                this.$Message.warning("办公地址不能为空！");
                return;
            }
            if (this.ledgerObj.address.length > 60) {
                this.$Message.warning("办公地址不能超过60个字符！");
                return;
            }
            if (!this.ledgerObj.linkman) {
                this.$Message.warning("联系人不能为空！");
                return;
            }
            if (this.ledgerObj.linkman.length > 20) {
                this.$Message.warning("联系人不能超过20个字符！");
                return;
            }
            if (!this.ledgerObj.linkmanPhone) {
                this.$Message.warning("联系电话不能为空！");
                return;
            }
            if (this.ledgerObj.linkmanPhone.length > 11) {
                this.$Message.warning("联系电话不能超过11个字符！");
                return;
            }
            if (!this.$regex.telRegEx(this.ledgerObj.linkmanPhone)) {
                this.$Message.warning('联系电话格式不正确')
                return;
            }
            if (this.ledgerObj.description && this.ledgerObj.description.length > 500) {
                this.$Message.warning("概况说明不能超过500个字符！");
                return;
            }
            if (this.$route.params.type == 'edit') {
                this.$api.companyOrganization
                    .enterpriseAreaEdit(this.ledgerObj)
                    .then(resp => {
                        if (resp.code == 200) {
                            this.$Message.success(resp.message)
                            Utils.$emit('demo', 'msg')
                            this.cancel()
                        }else{
                            this.$Message.warning(resp.data ? resp.data : resp.message)
                        }
                    })
            } else {
                this.ledgerObj.parentId = this.$route.params.id
                //保存/编辑区域传参type===2
                this.ledgerObj.type = 2
                this.$api.companyOrganization.enterpriseAreaAdd(this.ledgerObj).then(resp => {
                    if (resp.code == 200) {
                        this.$Message.success(resp.message)
                        Utils.$emit('demo', 'msg')
                        this.cancel('add-area')
                    } else {
                        this.$Message.warning(resp.data ? resp.data : resp.message)
                    }
                })
            }
        },
        // 取消
        cancel() {
            this.closetab()
            this.$router.push({
                path: '/organization/enterprise-info'
            })
        },
    }
}
</script>

<style scoped>
.code-row-bg-ledger {
    padding: 15px 0;
}

.add-edit-detail-box {
    padding: 40px 0;
}

.center1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
